<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title></title>
		<script src="./js/vue.js"></script>
		<script src="./js/uni.webview.1.5.4.js"></script>

		<style>
			.topvg {
				width: 100%;
				display: flex;
				height: 100px;
				background: linear-gradient(180deg, #111111, rgba(0, 0, 0, 0));
				position: fixed;
				top: 0px;
				left: 0px;
				color: white;
				z-index: 99;
				align-items: flex-start
			}


			.wbbg {
				background: #2b2b2b;
			}

			.btmvg {
				width: 100%;
				display: flex;
				height: 40%;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #111111);
				position: fixed;
				left: 0px;
				bottom: 0px;
				color: white;
				align-items: flex-end;
			}

			.btnitem {
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 60px;
				background: rgba(207, 207, 207, 0.3);
			}

			input {
				outline-color: invert; //设置元素的轮廓的颜色
				outline-style: none; //设置元素的整个轮廓的样式
				outline-width: 0px; //设置元素整个轮廓的宽度
				border: none;
				border-style: none;
				text-shadow: none;
				-webkit-appearance: none; //去除浏览器默认样式
				-webkit-user-select: text; //禁止用户用鼠标在页面上选中文字、图片等，让页面内容不可选。
				outline-color: transparent;
				box-shadow: none;
			}

			input:focus {
				outline: none;
			}

			.myvidvsmode {
				width: 100%;
				height: 100vh;
				background: linear-gradient(to bottom, #181818, rgba(0, 0, 0, 0.2), #181818);
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 3;
			}

			video {
				transform: scaleX(-1);
			}

			.vmodelzz {
				width: 70%;
				display: flex;
				align-items: center;
				flex-direction: column;
				position: fixed;
				top: 300px;
				left: 15%;
				z-index: 1076;
				border-radius: 6px;
				background: rgba(255, 255, 255, 0.99);
			}
		</style>
	</head>
	<body style="padding: 0px;margin: 0px;">
		<!-- 创建一个根元素 -->
		<div style="width: 100%;height: 100vh;overflow-y: hidden;" id="home">

			<div style="width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: flex-end;">
				<div
					style="width: 100%;display: flex;justify-content: center;color: aliceblue;font-size: 13px;position: fixed;top: 30px;left: 0px;z-index: 9;align-items: center;">

				</div>

				<div
					style="width: 125px;display: flex;flex-direction: column;align-items: center;position: fixed;right: 13px;top: 30px;z-index: 108;padding: 8px;height: 70vh;overflow-y: auto;">

					<div v-if="myvddata && myvddata.stream"
						style="width: 100%;display: flex;padding: 8px;flex-direction: column;align-items: center;border-radius: 6px;background: rgba(190, 199, 223, 0.2);color: #dae3f7;margin-bottom: 8px;">
						<div style="width: 100%;height: 180px;border-radius: 6px;">
							<video v-show="myvddata.video" id="vdbgyx0"
								style="width: 100%;height: 180px;object-fit: cover;z-index: 108;" src=""
								autoplay></video>
							<div v-if="!myvddata.video"
								style="width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;">
								<img :src="fileurl + 'avatar/' + myvddata.id + '.jpg'"
									style="width: 35px;height: 35px;border-radius: 35px;margin-bottom: 10px;margin-top: 5px;"
									alt="" />
								<div
									style="display: flex;justify-content: center;color: aliceblue;margin-bottom: 10px;">
									{{myvddata.name}}
								</div>
								<img v-if="myvddata.audio" src="./images/dfaa.png" style="width: 25px;height: 25px;"
									alt="" />
								<img v-if="!myvddata.audio" src="./images/dfab.png" style="width: 25px;height: 25px;"
									alt="" />
							</div>
						</div>
					</div>

					<div style="width: 100%;display: flex;padding: 8px;flex-direction: column;align-items: center;border-radius: 6px;background: rgba(190, 199, 223, 0.2);color: #dae3f7;margin-bottom: 8px;"
						v-for="(item,k) in lmusers">
						<div style="width: 100%;height: 180px;border-radius: 6px;">
							<video v-show="item.video" :id="`lmvd_${item.id}`"
								style="width: 100%;height: 180px;object-fit: cover;z-index: 108;" src=""
								autoplay></video>
							<div v-if="!item.video"
								style="width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;">
								<img :src="fileurl + 'avatar/' + item.id + '.jpg'"
									style="width: 35px;height: 35px;border-radius: 35px;margin-bottom: 10px;margin-top: 5px;"
									alt="" />
								<div
									style="display: flex;justify-content: center;color: aliceblue;margin-bottom: 10px;">
									{{item.name}}
								</div>
								<img v-if="item.audio" src="./images/dfaa.png" style="width: 25px;height: 25px;"
									alt="" />
								<img v-if="!item.audio" src="./images/dfab.png" style="width: 25px;height: 25px;"
									alt="" />
							</div>
						</div>
					</div>
				</div>

				<video v-show="uservddata.video" src="" autoplay id="vdbgyx1"
					style="width: 100%;height: 100%;position: fixed;left: 0rpx;top: 0rpx;z-index: 1;object-fit: cover;"
					object-fit="cover"></video>
				
				<div v-if="!uservddata.video" style="width: 100%;height: 100%;position: fixed;left: 0rpx;top: 0rpx;z-index: 9;display: flex;flex-direction: column;align-items: center;background: 2b2b2b;">
					<img :src="fileurl + 'avatar/' + luid + '.jpg'" style="width: 40px;height: 40px;border-radius: 40px;margin-top: 100px;" alt="" />
					<div style="color: aliceblue;margin-top: 6px;">{{uservddata.name}}</div>
					<img v-if="uservddata.audio" src="./images/dfaa.png" style="width: 30px;height: 30px;margin-top: 20px;" alt="" />
					<img v-else src="./images/dfab.png" style="width: 30px;height: 30px;margin-top: 20px;" alt="" />
				</div>

				<div class="myvidvsmode"></div>


				<div style="z-index: 109;" class="btmvg" v-if="status == 'normal' || status == 'applying'">
					<div
						style="display: flex;width: 100%;align-items: center;justify-content: center;margin-bottom: 30px;">

						<div @click="exit" class="btnitem" style="margin: 20px;background: #ff5e5e;">
							<img src="./images/hhdown.png" style="width: 30px;" mode="widthFix" />
						</div>

						<div @click="applylm" v-if="status == 'normal'" class="btnitem" style="margin: 20px;">
							<img src="./images/ssqlm.png" style="width: 30px;" mode="widthFix" />
						</div>

						<div @click="closelm" v-if="status == 'applying'" class="btnitem" style="margin: 20px;">
							<img src="./images/ggb.png" style="width: 25px;height: 25px;" mode="widthFix" />
						</div>
					</div>
				</div>

				<div style="z-index: 109;" class="btmvg" v-if="status == 'lming'">
					<div
						style="display: flex;width: 100%;align-items: center;justify-content: center;margin-bottom: 30px;">


						<div @click="changeaudio(false)" v-if="myvddata.audio" class="btnitem" style="margin: 8px;">
							<img src="./images/mmic.png" style="width: 30px;height: 30px;" mode="widthFix" />
						</div>
						<div @click="changeaudio(true)" v-if="!myvddata.audio" class="btnitem"
							style="background: rgba(255, 94, 94, 0.3);margin: 8px;">
							<img src="./images/mmic.png" style="width: 30px;height: 30px;" mode="widthFix" />
						</div>

						<div @click="changevideo(false)" v-if="myvddata.video" class="btnitem" style="margin:8px;">
							<img src="./images/ccamera.png" style="width: 30px;height: 30px;" mode="widthFix" />
						</div>
						<div @click="changevideo(true)" v-if="!myvddata.video" class="btnitem"
							style="margin:8px;background: rgba(255, 94, 94, 0.3);">
							<img src="./images/ccamera.png" style="width: 30px;height: 30px;" mode="widthFix" />
						</div>

						<div @click="exit" class="btnitem" style="margin: 8px;background: #ff5e5e;">
							<img src="./images/hhdown.png" style="width: 30px;height: 30px;" mode="widthFix" />
						</div>


						<div @click="closelmx" class="btnitem" style="margin: 8px;">
							<img src="./images/ggb.png" style="width: 25px;height: 25px;" mode="widthFix" />
						</div>
					</div>
				</div>

			</div>

		</div>
		<script>
			// 将vue挂载到id为home的根元素上
			var vm = new Vue({
				el: "#home",
				data() {
					return {
						id: '',
						uid: '',
						uname: '',
						luid: '',
						myvddata: '',
						uservddata: '',
						fileurl: '',
						srsUrl: '',
						ip: '',
						cameraType: '',
						status: "normal",
						applyt: 0,
						lmusers: []
					};
				},
				watch: {
					status: function(v) {
						this.sendMessage({
							type: "statuschange",
							data: v
						})
					}
				},
				onUnmounted() {

				},
				methods: {
					applylm: async function() {
						this.sendMessage({
							type: "applylm",
							data: {}
						})
					},
					closelm: async function() {
						this.sendMessage({
							type: "closelm",
							data: {}
						})
						this.status = 'normal'
					},
					closelmx: async function() {
						try {
							await this.myvddata.unpublish()
						} catch (e) {
							//TODO handle the exception
						}
						this.sendMessage({
							type: "closelmx",
							data: {}
						})
						this.status = 'normal'
					},
					changecamera: async function(e) {
						const type = this.myvddata.videoType
						let videoType = type
						if (videoType == "face") {
							videoType = "environment"
						} else {
							videoType = "face"
						}
						await this.myvddata.unpublish()
						this.publishStreamstartc({
							videoType,
							video: this.myvddata.video,
							audio: this.myvddata.audio,
						})
					},
					changeaudio: function(e) {
						this.myvddata.muteAudio(e)
						this.myvddata.audio = e
						this.sendMessage({
							type: "muteaudio",
							data: {
								audio: this.myvddata.audio,
								video: this.myvddata.video,
							}
						})
					},
					changevideo: function(e) {
						this.myvddata.muteVideo(e)
						this.myvddata.video = e
						this.sendMessage({
							type: "mutevideo",
							data: {
								audio: this.myvddata.audio,
								video: this.myvddata.video,
							}
						})
					},
					exit: async function() {
						try {
							if (this.myvddata) {
								await this.myvddata.unpublish()
							}
							if (this.uservddata) {
								await this.uservddata.close()
							}

							for (let o of this.lmusers) {
								await o.close()
							}
						} catch (e) {
							//TODO handle the exception
						}
						this.sendMessage({
							type: "exit",
							data: {}
						})
					},
					getvideo: async function() {
						const ret = await navigator.mediaDevices.getUserMedia({
							video: true,
							audio: false
						})
						this.src = ret
						this.publishStream({
							video: true
						})

						setTimeout(() => {
							this.subStream()
						}, 5000)
					},
					sublmStream: async function(info) {
						const _this = this
						const roomId = "liveroomlm" + this.luid
						const id = info.id
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'recvonly'
						});
						pc.addTransceiver('video', {
							direction: 'recvonly'
						});
						let offer = await pc.createOffer();
						let stream = new MediaStream();
						pc.ontrack = function(event) {
							console.log(event);
							stream.addTrack(event.track);
						};
						await pc.setLocalDescription(offer);
						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/play/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/play/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);


						function close() {
							stream.getTracks().forEach(function(track) {
								track.stop();
								stream.removeTrack(track);
							});
							// stream.close()
							pc.close();
							document.getElementById("vdbgyx1").srcObject = null
						}

						const vdata = {
							id: info.id,
							roomId,
							name: info.name,
							pc,
							stream,
							audio: info.audio,
							video: info.video,
							close,
						};

						this.lmusers.push(vdata)

						setTimeout(() => {
							document.getElementById(`lmvd_${info.id}`).srcObject = stream
						}, 1500)
					},
					subStream: async function(info) {
						console.log("infofofo", JSON.stringify(info))
						const _this = this
						const roomId = "liveroom"
						const id = this.luid
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'recvonly'
						});
						pc.addTransceiver('video', {
							direction: 'recvonly'
						});
						let offer = await pc.createOffer();
						let stream = new MediaStream();
						pc.ontrack = function(event) {
							console.log(event);
							stream.addTrack(event.track);
						};
						await pc.setLocalDescription(offer);
						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/play/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/play/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);


						function close() {
							stream.getTracks().forEach(function(track) {
								track.stop();
								stream.removeTrack(track);
							});
							// stream.close()
							pc.close();
							document.getElementById("vdbgyx1").srcObject = null
						}

						const vdata = {
							id: _this.luid,
							roomId,
							name: info ? info.name : '-',
							pc,
							stream,
							audio: true,
							video: true,
							close,
						};

						this.uservddata = vdata

						setTimeout(() => {
							document.getElementById("vdbgyx1").srcObject = stream
						}, 1500)
					},
					publishStreamstartc: async function(options) {
						const _this = this
						const id = this.luid
						const roomId = 'liveroomlm'+id
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'sendonly'
						});
						pc.addTransceiver('video', {
							direction: 'sendonly'
						});
						const stream = await this.getStreamLoc({
							audio: true,
							video: {
								facingMode: options.videoType ? options.videoType : "environment"
							},
						})
						this.cameraType = options.videoType ? options.videoType : "environment"
						console.log(stream);
						stream.getTracks().forEach(function(track) {
							pc.addTrack(track);
							if (track.kind === 'audio') {
								if (options.audio === false) {
									track.enabled = false;
								}
							}
							if (track.kind === 'video') {
								if (options.video === false) {
									track.enabled = false;
								}
							}
						});
						let offer = await pc.createOffer();
						await pc.setLocalDescription(offer);

						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/publish/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								if (data.code === 400) {
									resolve(false);
								}
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/publish/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});

						console.log(session);
						if (session === false) {
							return false;
						}
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);

						function muteAudio(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'audio') {
									track.enabled = type ? type : false;
								}
							});
						}

						function muteVideo(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'video') {
									track.enabled = type ? type : false;
								}
							});
						}


						async function unpublish() {
							try {
								stream.getTracks().forEach(function(track) {
									track.stop();
									stream.removeTrack(track);
								});
								// stream.close()
								pc.close();
								document.getElementById("vdbgyx0").srcObject = null
								_this.myvddata.stream = ''
							} catch (e) {
								//TODO handle the exception
							}
						}

						const vdata = {
							id: id,
							roomId: roomId,
							pc,
							stream,
							audio: options.audio == false ? false : true,
							video: options.video == false ? false : true,
							videoType: options.videoType ? options.videoType : "environment",
							muteAudio,
							muteVideo,
							unpublish,
						};

						this.myvddata = vdata

						document.getElementById(`vdbgyx0`).srcObject = stream

					},
					publishStream: async function(options) {
						const _this = this
						const id = this.uid
						const roomId = 'liveroomlm' + this.luid
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'sendonly'
						});
						pc.addTransceiver('video', {
							direction: 'sendonly'
						});
						const stream = await this.getStreamLoc({
							audio: true,
							video: {
								facingMode: options.videoType ? options.videoType : "environment"
							},
						})
						this.cameraType = options.videoType ? options.videoType : "environment"
						console.log(stream);
						stream.getTracks().forEach(function(track) {
							pc.addTrack(track);
							// if (track.kind === 'audio') {
							// 	if (options.audio === false) {
							// 		track.enabled = false;
							// 	}
							// }
							// if (track.kind === 'video') {
							// 	if (options.video === false) {
							// 		track.enabled = false;
							// 	}
							// }
						});
						let offer = await pc.createOffer();
						await pc.setLocalDescription(offer);

						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/publish/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								if (data.code === 400) {
									resolve(false);
								}
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/publish/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});

						console.log(session);
						if (session === false) {
							return false;
						}
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);

						function muteAudio(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'audio') {
									track.enabled = type ? type : false;
								}
							});
						}

						function muteVideo(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'video') {
									track.enabled = type ? type : false;
								}
							});
						}


						async function unpublish() {
							try {
								stream.getTracks().forEach(function(track) {
									track.stop();
									stream.removeTrack(track);
								});
								// stream.close()
								pc.close();
								document.getElementById("vdbgyx0").srcObject = null
								_this.myvddata.stream = ''
							} catch (e) {
								//TODO handle the exception
							}
						}

						const vdata = {
							id: _this.uid,
							roomId: roomId,
							name: this.uname,
							pc,
							stream,
							audio: options.audio == false ? false : true,
							video: options.video == false ? false : true,
							videoType: options.videoType ? options.videoType : "environment",
							muteAudio,
							muteVideo,
							unpublish,
						};

						this.myvddata = vdata

						setTimeout(() => {
							document.getElementById(`vdbgyx0`).srcObject = stream
						}, 1500)

						this.sendMessage({
							type: "pubmystreamdone",
							data: {}
						})

					},
					getStreamLoc: async function(constraints) {
						if (navigator.mediaDevices.getUserMedia) {
							console.log('最新的标准API', navigator.mediaDevices.getUserMedia);
							const rs = await navigator.mediaDevices.getUserMedia(constraints)
							return rs
						} else if (navigator.webkitGetUserMedia) {
							console.log('webkit核心浏览器');
							const rs = await navigator.webkitGetUserMedia(constraints)
							return rs
						} else if (navigator.mozGetUserMedia) {
							console.log('firfox浏览器');
							const rs = await navigator.mozGetUserMedia(constraints);
							return rs
						} else if (navigator.getUserMedia) {
							console.log('旧版API');
							const rs = await navigator.getUserMedia(constraints);
							return rs
						} else {
							const rs = await navigator.mediaDevices.getUserMedia(constraints)
							return rs
						}
					},
					onMessage: async function(e) {
						let message = e
						if (typeof e != 'object') {
							message = JSON.parse(e)
						}

						console.log('HTML接收APP数据', JSON.stringify(message));

						const type = message.type
						const data = message.data
						
						console.log('HTML接收-APP数据', JSON.stringify(data));

						if (type == "statuschange") {
							this.status = data
						}

						if (type == "subStream") {
							await this.subStream(data)
							if (data.lmusers) {
								for (let o of data.lmusers) {
									await this.sublmStream(o)
								}
							}
						}


						if (type == "sublmStream") {
							this.sublmStream(data)
						}

						if (type == "applylmagree") {
							this.status = data
							this.publishStream({
								video: true,
								audio: true,
								videoType: 'face'
							})
						}

						if (type == "liveroomchange") {
							this.uservddata.video = data.video
							this.uservddata.audio = data.audio
						}

						if (type == "letclosemx") {
							this.closelmx()
						}

						if (type == "liveroomremoveuser") {
							for (let o of this.lmusers) {
								if (o.id == data.id) {
									try {
										await o.close()
									} catch (e) {
										//TODO handle the exception
									}
									break
								}
							}
							this.lmusers = this.lmusers.filter(ex => ex.id != data.id)
						}

						if (type == "lmuserleave") {
							if (data.id != this.uid) {
								for (let o of this.lmusers) {
									if (o.id == data.id) {
										await o.close()
										break
									}
								}
								this.lmusers = this.lmusers.filter(ex => ex.id != data.id)
							}
						}

						if (type == "lmuserchangeinfo") {
							if (data.user.id != this.uid) {
								for (let o of this.lmusers) {
									if (o.id == data.user.id) {
										o.video = data.data.video
										o.audio = data.data.audio
										break
									}
								}
							}
						}

						if (type == "letexit") {
							this.exit()
						}




					},
					sendMessage: function(e) {
						uni.postMessage({
							data: e
						})
					}
				},
				mounted() {
					const _this = this
					// uid=${user.id}&uname=${user.name}&luid=${uid}&id=${id}&ip=${config.ip}&srsUrl=${encodeURIComponent(config.srsUrl)}&fileurl=${encodeURIComponent(fileurl)}`
					let params = new URLSearchParams(window.location.search);
					let fileurl = decodeURIComponent(params.get('fileurl'));
					let srsUrl = decodeURIComponent(params.get('srsUrl'));
					let uid = params.get('uid');
					let uname = params.get('uname');
					let luid = params.get('luid');
					let id = params.get('id');
					let ip = params.get('ip');

					this.fileurl = fileurl
					this.srsUrl = srsUrl
					this.uid = uid
					this.uname = uname
					this.luid = luid
					this.id = id
					this.ip = ip


					// 监听数据
					window.parent.addEventListener("message", function(e) {
						console.log("YYYY", e)
						let ex = e.data
						if (ex.type == "WEB_INVOKE_APPSERVICE") {
							ex = ex.data.arg
						}
						_this.onMessage(ex)
					})

				},
				created() {},
			});
		</script>
	</body>
</html>